<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <script src="./02.js"></script>
</head>

<body>
    <form action="" method="post" id="myform">
        <table>
            <tr>
                <td>账号：</td>
                <td><input type="text" data-req="true" id="acc"></td>
                <td class="info">*</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="text" data-min-len="3" name="password" id="pwd"></td>
                <td class="info">*</td>
            </tr>
            <tr>
                <td>邮政编码：</td>
                <td><input type="text" data-max-len="9" name="" id=""></td>
                <td class="info">*</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" id="" value="提交">
                    <input type="submit" id="" value="取消">
                </td>
            </tr>
        </table>
    </form>
    <script>
        //表单验证  账号必填，密码至少六位

        //1.onsubmit字符串验证 (验证反馈不及时)
        // var form=document.querySelector('#myform');
        // form.addEventListener('submit',function(e){
        //     //账号必填
        //     var acc=document.querySelector('#acc');
        //     var td=acc.parentNode.nextElementSibling;
        //     if(acc.value.trim() === ''){   //''是空字符串  //trim去掉空格
        //         //不合法
        //         td.innerHTML='不为空';
        //         td.style.color='red';
        //         //阻止提交，(阻止默认行为)，调用事件对象的parentNode
        //         // e.parentNode();
        //     }else{
        //         //合法
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }

        //     //密码至少六位
        //     var pwd=document.querySelector('#pwd');
        //     var pwdTd=pwd.parentNode.nextElementSibling;
        //     if(pwd.value.trim().length <= 6){
        //         //不合法
        //         pwdTd.innerHTML='不能小于6';
        //         pwdTd.style.color='red';
        //         //阻止提交，(阻止默认行为)，调用事件对象的parentNode
        //         // e.parentNode();
        //     }else{
        //         //合法
        //         pwdTd.innerHTML='有效密码';
        //         pwdTd.style.color='green';
        //     }
        // })


        //2.onblur   （不全面）
        // var acc=document.querySelector('#acc');
        // acc.onblur=function(){
        //     var td=this.parentNode.nextElementSibling;
        //     if(this.value.trim()===''){
        //         td.innerHTML='不为空';
        //         td.style.color='red';
        //     }else{
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }
        // }
        // var pwd=document.querySelector('#pwd');
        // pwd.onblur=function(){
        //     var td=this.parentNode.nextElementSibling;
        //     if(this.value.trim().length< 6){
        //         td.innerHTML='不为空';
        //         td.style.color='red';
        //     }else{
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }
        // }
        // //邮箱
        // var eml=document.querySelector('#eml');
        // eml.onblur=function(){
        //     var td=this.parentNode.nextElementSibling;
        //     var index=this.value.indexOf('@');
        //     //@不在第一位
        //     if(index<=0){
        //         td.innerHTML='不合法';
        //         td.style.color='red';
        //     }else{
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }
        // }



        //正则表达式
        // var acc=document.querySelector('#acc');
        // acc.onblur=function(){
        //     //创建正则表达式
        //     //字符串中\表示转义字符,在此表达式中再加一个\
        //     var reg=new RegExp('\\w{1,}','ig');//\w{1,} 至少一位 i 忽略大小写 g 全局参数
        //     //获取显示提示信息的元素对象
        //     var td=this.parentNode.nextElementSibling;
        //     //验证数据
        //     if(!reg.test(this.value)){
        //         td.innerHTML='无效账号';
        //         td.style.color='red';
        //     }else{
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }
        // }
        // var pwd=document.querySelector('#pwd');
        // pwd.onblur=function(){
        //     //创建正则表达式
        //     //字符串中\表示转义字符,在此表达式中再加一个\
        //     // var reg=new RegExp('\\w{6,}','ig');//\w{1,} 至少6位 i 忽略大小写 g 全局参数
        //     //以abc其中一个开头，后跟若干个数字
        //     var reg=/^[abc]{1}\d{5,}$/ig;
        //     //获取显示提示信息的元素对象
        //     var td=this.parentNode.nextElementSibling;
        //     //验证数据
        //     if(!reg.test(this.value)){
        //         td.innerHTML='密码长度不小于6';
        //         td.style.color='red';
        //     }else{
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }
        // }
        //邮编
        // var zip=document.querySelector('#zip');
        // zip.onblur=function(){
        //     //创建正则表达式
        //     //字符串中\表示转义字符,在此表达式中再加一个\
        //     var reg=new RegExp('\\d{6,}','ig');//\w{1,} 至少6位 i 忽略大小写 g 全局参数
        //     // var reg=/^\d{6}$/ig;
        //     // var reg=/^[0123456789]{6}$/ig;
        //     // var reg=/^[0-9]{6}$/ig;
        //    //获取显示提示信息的元素对象
        //     var td=this.parentNode.nextElementSibling;
        //     //验证数据
        //     if(!reg.test(this.value)){
        //         td.innerHTML='编码是6位';
        //         td.style.color='red';
        //     }else{
        //         td.innerHTML='合法';
        //         td.style.color='green';
        //     }
        // }


        // //固定电话号码
        // var reg=/^0[1-9]\d{1,2}-\d{7,8}&/
        // //手机号码
        // var reg=/^[1][0-9]{10}&/
        // //电子邮箱
        // var reg=/^\d{3,}@\w{}&/
    </script>
</body>

</html>